<script lang="ts" setup>
import { onMounted, reactive } from "vue";
import ActivityCard from '../components/base/ActivityCard.vue';
import AllModel from "../components/base/AllModel.vue";
import { ItemData } from "../common/type/base";
import { getIPhoneList,getCounts } from "../common/api/index";

import bg1 from "../assets/images/spring/backdrop/bg-first.png";
import bg2 from "../assets/images/spring/backdrop/bg-apple.png";
import bg3 from "../assets/images/spring/backdrop/bg-apple-exclusive.png";
import axios from 'axios';

const dataList: ItemData[] = reactive([]);
let urlParamsId=''

// getCountNums();
onMounted(()=>{
    getIPhoneData();
    // getFlowUv();
    getQuery();
})
function getQuery(){
	// 'https://activity.tingxiangzu.com/spring?adid=1775633943804928&clickid=B.6U1WEzhORbeZ4Pos5yqfy33Aash0eQ1TX9fjvv9eWlBZhfWIUqEfm6imkgnepIxNo4xtij8m2hb0eNJLi8Lq3J4EMPBVMAZNjzeYS4DI36JvA&creativeid=1768043791920141&creativetype=5'
	let url = window.location.href
	let urlStr = url.split('?')
    if(urlStr.length === 2) {
        let tempArr = urlStr[1].split('&') || []
        tempArr.forEach(item=>{
            if(item.split('=')[0] == 'clickid') {
                const str = item.split('=')[1]
                window.localStorage.setItem('clickId', str)
            }
        })
    }
	// axios.post('https://txxzdata.tingxiangzu.com/Douyin/Notice/evensNotify',{
	// 	urlParams:urlStr
	// }).then(res=>{
    //     urlParamsId=res.data
    //     window.localStorage.setItem('clickId',res.data)
	// })
}
async function getIPhoneData() {
    let res = await getIPhoneList({
        cate_id: "53",
        convey_type: 1,
        orderby_name: "id",
        sort: "desc",
        size: 1,
        pageSize: 9
    })
    if(res.data?.data) {
        const data = res.data.data;
        dataList.push(...data);
    }
}
// 没有用
// function getCountNums(){
// 	getCounts().then(res=>{
// 		console.log(res);
// 	})
// }

function backTop() {
    window.scrollTo({
        top: 0,
        left: 0,
        behavior: "smooth"
    })
}
function receiveCoupon() {	
	let clickid = window.localStorage.getItem('clickId')
    const href = 'alipays://platformapi/startapp?appId=2021004105661520&page=' + encodeURIComponent('pages/index/index?from=2023032916475592&clickid='+clickid+'&saleuserid=2023032916475592&urlParamsId='+urlParamsId);
    window.location.href = href;
}
//流量Uv
function getFlowUv(){
    let url = window.location.href
	let urlStr = url.split('?')[0]
    urlStr = encodeURIComponent(urlStr)
    let getUrlStr = 'https://txxzdata.tingxiangzu.com/Home/Home/statisticsIP?type=1&url=' + urlStr
    axios.get(getUrlStr).then(res=>{
        console.log('流量ev请求-');
	})
}
</script>
<template>
    <div class="head-bg">
        <img class="first" src="../assets/images/spring/head/first.png" alt="first.png">
        <img class="spring" src="../assets/images/spring/head/spring.png" alt="spring.png">
        <img class="phone" src="../assets/images/spring/head/phone.png" alt="phone.png">
    </div>
    <div class="default">
        <div class="coupon" @click="receiveCoupon">
            <div class="left location bold">
                <span class="first">首月低至</span>
                <span class="title">1</span>
                <span class="price">元</span>
            </div>
            <div class="center location">
                <span class="f14">先领券·再购物</span>
                <div class="detail f16">
                    <span class="bold">仅限“新用户”使用</span>
                </div>
                <span class="f12">数量有限 先到先得</span>
            </div>
            <div class="right location bold">
                <span>立即</span>
                <span>领取</span>
            </div>
        </div>
        <activity-card :data-list="dataList" min-title="首月一元" :bg-src="bg1"></activity-card>
        <activity-card :data-list="dataList" min-title="首月一元" :bg-src="bg2"></activity-card>
        <all-model :bg-src="bg3" default-color="#B9B9B9" active-color="#FE5B3B"></all-model>
        <div class="back-top">
            <img class="img" src="../assets/images/spring/back-top.png" @click="backTop" />
        </div>
    </div>
</template>
<style lang="scss" scoped>
.head-bg {
    width: 750px;
    height: 820px;
    background-image: url("../assets/images/spring/head/head.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;

    .first {
        width: 362px;
        height: 88px;
        margin-top: 100px;
    }

    .spring {
        width: 252px;
        height: 44px;
        margin-top: 16px;
        margin-bottom: 10px;
    }

    .phone {
        width: 488px;
        height: 298px;
    }
}

.default {
    background-color: #FBF4F4;
    width: 750px;
    padding: 15px;
    padding-bottom: 40px;
    margin-top: -15px;

    .coupon {
        width: 718px;
        height: 276px;
        margin-bottom: 50px;
        position: relative;
        background-image: url("../assets/images/spring/coupon.png");
        background-size: 100% 100%;

        .location {
            position: absolute;
            top: 50%;
            transform: translate(-50%, -50%);
            color: #FD5233;
        }

        .left {
            left: 24%;
            top: 45%;

            .title {
                font-size: 70px;
            }
        }

        .center {
            left: 420px;
            display: flex;
            flex-direction: column;
            align-items: center;
            transform: translate(-50%, -50%) scale(.8);
            color: #FFFFFF;

            .detail {
                margin: 15px 0;
                display: flex;
                align-items: center;
                flex-direction: column;
            }
        }

        .right {
            right: 20px;
            display: flex;
            flex-direction: column;
            color: #FFFFFF;

            span {
                &:first-of-type {
                    margin-bottom: 10px;
                }
            }
        }
    }

    .back-top {
        width: 196px;
        height: 52px;
        margin: 32px auto 0;

        .img {
            width: 100%;
            height: 100%;
            background-size: cover;
        }
    }
}
</style>